<div class="user-order">
    <div class="user-order-filter">
        <div class="user-order-filter-title">
            <span>所有订单</span>
        </div>
        <div class="user-order-filter-content">
            <div class="filter-input">
                <div>
                    <label>订单标题：</label>
                    <input nz-input placeholder="订单标题搜索" [(ngModel)]="form.orderName" style="width: 120px;" />
                </div>
                <div>
                    <label>订单编号：</label>
                    <input nz-input placeholder="订单编号搜索" [(ngModel)]="form.orderId" style="width: 120px;" />
                </div>
                <div>
                    <label>交易状态：</label>
                    <nz-select style="width: 120px;" [(ngModel)]="form.status" nzAllowClear nzPlaceHolder="交易状态搜索">
                        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
                        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                    </nz-select>
                </div>
                <div>
                    <label>成交时间：</label>
                    <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)"></nz-range-picker>
                </div>
            </div>
            <div class="filter-button">
                <button nz-button nzType="primary" nzSize="small" nzShape="round">搜索</button><br>
                <button nz-button nzType="default" nzSize="small" nzShape="round">重置</button>
            </div>
        </div>
    </div>
    <div class="user-order-header">
        <div style="width: 50%;">订单信息</div>
        <div style="width: 15%;">订单金额</div>
        <div style="width: 10%;">数量</div>
        <div style="width: 15%;">订单状态</div>
        <div style="width: 10%;">操作</div>
    </div>
    <div class="user-order-list">
        <div class="order-item">
            <div class="order-item-header">
                <div>
                    <span>订单编号：01333900987678</span>
                    <span>下单时间：2020.09.12 14:26:56</span>
                </div>
                <a>查看订单</a>
            </div>
            <div class="order-item-info">
                <div class="order-info" style="width: 50%;">
                    <img src="../../../../../assets/img/image1.png" />
                    <div>
                        <h3>网络摄像机检测网络摄像机检测网络摄像机检测网络</h3>
                        <p>
                            <span><i>检测类型：</i>委托检测</span>
                            <span><i>送检机构：</i>公安三所</span>
                        </p>
                    </div>
                </div>
                <div class="order-price" style="width: 15%;">
                    <p class="price-count">¥1200.00</p>
                    <p class="price-once">单价:¥300.00</p>
                </div>
                <div class="order-count" style="width: 10%;">4</div>
                <div class="order-status" style="width: 15%;">交易成功</div>
                <div class="order-cz" style="width: 10%;"><button nz-button nzType="primary" nzSize="small" nzShape="round">立即付款</button></div>
            </div>
        </div>
    </div>
</div>
